<template>
	<view>
		<view v-if="vuex_isMobile" class="foot-container-m">
			<view class="flex-column">
				<view class="foot-top">
					<view class="foot-left">
						<view class="foot-left-item">
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/phone.png" mode="" style="width: 43px;height: 56px;">
								</image>
								<view class="text">医院热线：0531-55866018</view>
							</view>
							<view class="text">急诊：0531-55866620</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/phone.png" mode="" style="width: 43px;height: 56px;">
								</image>
								<view class="text">导医台：0531-55866018</view>
							</view>
							<view class="text">健康管理中心：0531-55866626</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align">
								<image src="/static/index/footer/location.png" mode=""
									style="width: 43px;height: 56px;">
								</image>
								<view class="text">地址：山东省济南市凤山路2001号</view>
							</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align">
								<image src="/static/index/footer/wechat.png" mode="" style="width: 43px;height: 56px;">
								</image>
								<view class="text">微信：银丰（济南）医院公众号</view>
							</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align">
								<image src="/static/index/footer/email.png" mode="" style="width: 43px;height: 56px;">
								</image>
								<view class="text">邮箱：yuanzhang@yinfeng.com.cn</view>
							</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align">
								<image src="/static/index/footer/weibo.png" mode="" style="width: 43px;height: 56px;">
								</image>
								<view class="text">微博：银丰（济南）医院</view>
							</view>
						</view>
					</view>
					<view class="foot-center">
						<uni-data-select v-model="value1" :localdata="range1" @change="change1" placeholder="上级医疗单位"
							disabled></uni-data-select>
						<uni-data-select v-model="value2" :localdata="range2" @change="change2" placeholder="相关友情链接"
							disabled></uni-data-select>
					</view>
					<view class="foot-right">
						<view class="foot-right-item">
							<image src="/static/index/footer/gzh.jpg" mode="" style="width: 290px;height: 290px;"></image>
							<view class="foot-right-item-name text">公众号</view>
						</view>
						<view class="foot-right-item">
							<image src="/static/index/footer/fwh.jpg" mode="" style="width: 290px;height: 290px;"></image>
							<view class="foot-right-item-name text">服务号</view>
						</view>
						<view class="foot-right-item">
							<image src="/static/index/footer/xcx.jpg" mode="" style="width: 290px;height: 290px;"></image>
							<view class="foot-right-item-name text">小程序</view>
						</view>
					</view>
				</view>
				<view class="foot-bottom">
					<text>银丰（济南）医院 版权所有 鲁ICP备123456789号 公安备案号：37010123456789</text>
				</view>
			</view>
		</view>
		<view v-else class="foot-container">
			<view class="flex-column">
				<view class="foot-top">
					<view class="foot-left">
						<view class="foot-left-item">
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/phone.png" mode="" style="width: 14px;height: 14px;">
								</image>
								<view class="text">医院热线：0531-55866018</view>
							</view>
							<view class="text">急诊：0531-55866620</view>
						</view>
						<view class="foot-left-item">
							<view class="text" style="width: 50%;">导医台：0531-55866018</view>
							<view class="text">健康管理中心：0531-55866626</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/location.png" mode=""
									style="width: 14px;height: 14px;">
								</image>
								<view class="text">地址：山东省济南市凤山路2001号</view>
							</view>
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/wechat.png" mode="" style="width: 14px;height: 14px;">
								</image>
								<view class="text">微信：银丰（济南）医院公众号</view>
							</view>
						</view>
						<view class="foot-left-item">
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/email.png" mode="" style="width: 14px;height: 14px;">
								</image>
								<view class="text">邮箱：yuanzhang@yinfeng.com.cn</view>
							</view>
							<view class="flex-align" style="width: 50%;">
								<image src="/static/index/footer/weibo.png" mode="" style="width: 14px;height: 14px;">
								</image>
								<view class="text">微博：银丰（济南）医院</view>
							</view>
						</view>
					</view>
					<view class="foot-center">
						<uni-data-select v-model="value1" :localdata="range1" @change="change1" placeholder="上级医疗单位"
							disabled></uni-data-select>
						<uni-data-select v-model="value2" :localdata="range2" @change="change2" placeholder="相关友情链接"
							disabled></uni-data-select>
					</view>
					<view class="foot-right">
						<view class="foot-right-item">
							<image src="/static/index/footer/gzh.jpg" mode="" style="width: 80px;height: 80px;"></image>
							<view class="foot-right-item-name text">公众号</view>
						</view>
						<view class="foot-right-item">
							<image src="/static/index/footer/fwh.jpg" mode="" style="width: 80px;height: 80px;"></image>
							<view class="foot-right-item-name text">服务号</view>
						</view>
						<view class="foot-right-item">
							<image src="/static/index/footer/xcx.jpg" mode="" style="width: 80px;height: 80px;"></image>
							<view class="foot-right-item-name text">小程序</view>
						</view>
					</view>
				</view>
				<view class="foot-bottom">
					<text>银丰（济南）医院 版权所有 鲁ICP备123456789号 公安备案号：37010123456789</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				range1: [{
						value: 0,
						text: "上级医疗单位1"
					},
					{
						value: 1,
						text: "上级医疗单位2"
					},
					{
						value: 2,
						text: "上级医疗单位3"
					}
				],
				range2: [{
						value: 0,
						text: "相关友情链接1"
					},
					{
						value: 1,
						text: "相关友情链接2"
					},
					{
						value: 2,
						text: "相关友情链接3"
					}
				],
			}
		},
		methods: {
			change1(e) {
				console.log(e);
			},
			change2(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss">
	.foot-container-m {
		box-sizing: border-box;
		margin-top: 100px;
		padding: 58px 72px;
		background-image: url('/static/index/footer/bottom-bg.png');
		width: 100%;
		height: 1609px;
	
		.text {
			font-weight: 400;
			font-size: 43px;
			color: #FFFFFF;
			line-height: 63px;
		}
	
		.foot-top {
			width: 100%;
			padding-bottom: 100px;
	
			.foot-left {
				width: 100%;
	
				.foot-left-item {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 22px;
				}
			}
	
			.foot-center {
				padding-top: 55px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
	
			.foot-right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 55px;
	
				.foot-right-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
	
					.foot-right-item-name {
						margin-top: 18px;
					}
				}
			}
		}
	
		.foot-bottom {
			font-weight: 400;
			font-size: 25px;
			color: #FFFFFF;
			line-height: 36px;
			text-align: center;
			margin-top: 50px;
		}
	}
	.foot-container {
		box-sizing: border-box;
		margin-top: 100px;
		padding: 40px 360px;
		background-image: url('/static/index/footer/bottom-bg.png');
		width: 100%;
		height: 261px;

		.text {
			font-weight: 400;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 19px;
		}

		.foot-top {
			width: 100%;
			border-bottom: 1px solid #8D8D8D;
			padding-bottom: 32px;
			display: flex;

			.foot-left {
				width: 50%;

				.foot-left-item {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 10px;
				}
			}

			.foot-center {
				width: 20%;
				padding: 0 40px;
				border-left: 1px solid #8D8D8D;
				border-right: 1px solid #8D8D8D;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.foot-right {
				width: 30%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 50px;

				.foot-right-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.foot-right-item-name {
						margin-top: 10px;
					}
				}
			}
		}

		.foot-bottom {
			font-weight: 400;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 20px;
			text-align: center;
			margin-top: 20px;
		}
	}

	::v-deep.uni-select__input-text {
		color: #FFFFFF;
	}

	::v-deep.uni-select {
		background-color: #193F93;
		border: 1px solid #193F93;
	}

	// ::v-deep.uni-select__selector {
	// 	background-color: #193F93;
	// 	color: #FFFFFF;
	// 	border: 1px solid #193F93;
	// }
</style>